<script>
    // 使用pinia中的状态
    // 1.在setup 组合式API中用 -- 推荐
    // 2.在选项式 API中用，可以结合methods、mapAction简化代码

    // 当前是在 setup  组合式API中用
    // 01.导入
    import useCountStore from '../store/index.js'

    export default {
        setup(props, context) {
            // 02.获取store对象
            const countStore = useCountStore();
            return {
                // 03.导出 模板中才能用
                countStore
            }
        }
    }
</script>

<template>
    <!-- 04.模板中显示： -->
    <!-- 显示state中的数据：countStore.count -->
    <!-- 在页面中使用 getter的时候 ，同state一样，getter是特殊的state -->
    <span>state: {{countStore.count}}</span> || getters: {{countStore.num10}}

    <!-- 05.调用action 修改state -->
    <!-- 方式1：直接调用 action -->
    <button @click="countStore.increment()">+</button> &nbsp;&nbsp;
    <button @click="countStore.reduce()">-</button> || 

    <!-- 方式2：通过 $patch( { count:1000 } ) ，可以指定要修改的state属性
         { count:1000 } 中的 count 是 store 中的属性名，1000 是需要修改的值
    -->
    <button @click="countStore.$patch({ count:1000 })">Add + 100</button>
    <button @click="countStore.$patch({ count:countStore.count+50 })">Add + 5
        0</button>

</template>

<style>

</style>